<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container class="frame_ct">
	<div class="topline"></div>
	<el-header height="5.7%">
		<h1>武汉瑞亚海事学校培训报名管理系统</h1>
		<div class="r">
			<el-dropdown>
				<i class="el-icon-setting"></i>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>个人中心</el-dropdown-item>
					<el-dropdown-item>退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>王宁</span>
		</div>
	</el-header>
	<el-container>
		<el-aside width="8%">
			<globalnav @buttonclick="menuClick" :whichnavsend="'1'"></globalnav>
		</el-aside>
		<el-container>
			<el-main>
				<el-breadcrumb class="el-breadcrumb">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				</el-breadcrumb>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-card class="index_topcard index_topcard1" shadow="always">
							<h2>课程数</h2>
							<div class="r">
								<div>
									<b>开班</b>
									<span>36</span>
								</div>
								<div>
									<b>全部</b>
									<span>64</span>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card class="index_topcard index_topcard2" shadow="always">
							<h2>新增报名</h2>
							<div class="r">
								<div>
									<b>今日</b>
									<span>48</span>
								</div>
								<div>
									<b>昨日</b>
									<span>64</span>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card class="index_topcard index_topcard3" shadow="always">
							<h2>学员人数</h2>
							<div class="r">
								<div>
									<b>在读</b>
									<span>234</span>
								</div>
								<div>
									<b>报名</b>
									<span>128</span>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-row :gutter="0" class="index_recentnrank">
					<el-col :span="12" class="index_recent">
						<h2>近期班期报名进度</h2>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:69%"></span><b>69%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:62%"></span><b>62%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:59%"></span><b>59%</b></div>
							<h3>10月10号 水手晋升三副培训三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:53%"></span><b>53%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:49%"></span><b>49%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:43%"></span><b>43%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:41%"></span><b>41%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:36%"></span><b>36%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
						<el-card class="index_recentcard" shadow="always">
							<div class="percent"><span style="width:32%"></span><b>32%</b></div>
							<h3>10月10号 水手晋升三副培训</h3>
							<div class="index_recentcard_num">
								<div class="li">
									<b>报名</b>
									<span>47</span>
								</div>
								<div class="li">
									<b>名额</b>
									<span>80</span>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12" class="index_rank">
						<h2>报名进度排行榜</h2>
						<el-table ref="filterTable" :data="tableData">
							<el-table-column prop="rank" label="排名" column-key="rank" width="60">
							</el-table-column>
							<el-table-column prop="coursename" label="课程名称" width="400">
							</el-table-column>
							<el-table-column label="报名进度" width="160">
								<template slot-scope="scope">
									<div class="percent">
										<span :style="{width:scope.row.percent}"></span>
										<b>{{scope.row.percent}}</b>
									</div>
								</template>
							</el-table-column>
							<el-table-column></el-table-column>
							<el-table-column prop="status" label="开班状态" width="100" :filters="[{ text: '开班', value: '开班' }, { text: '未开班', value: '未开班' }]"
							 :filter-method="filterTag" filter-placement="bottom-end" fixed="right">
								<template slot-scope="scope">
									<el-tag :type="scope.row.status === '开班' ? 'primary' : 'success'" disable-transitions>{{scope.row.status}}</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>	
			</el-main>
		</el-container>
	</el-container>
</el-container>
</div>
</body>

<script src="js/nav.js"></script>
<script src="js/common.js"></script>
</html>